<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div class="box">
    <span>span 1</span>
    <p>p 1</p>
    <div>div 1</div>
</div>

<script>

// let sum = 0;
// for (var a = 0, b = 0; a < 6, b < 9; a++, b++){
//     sum = a + b;// 8 + 8
// }
// console.log( a );// 9
// console.log( b );// 9
// console.log( sum );// 16

// 逗号运算符会返回最右边的值
// console.log( (1,2,3) );// 3
// console.log( (3 > 4, 5 < 7) );// true


/* var length = 3;
var obj = {
    length: 4,
    fn: function (){// 0x001
        return this.length;
    }
}
console.log( obj.fn() );// 4
(function (fn){// fn = 0x001
    var length = 5;
    console.log( fn() );// 3 
    console.log( arguments[0]() );// 1
    // arguments: {
    //     length: 1,
    //     0: 0x001
    // }
    // arguments.0() => arguments.length  0x001函数内部的this指向arguments
})(obj.fn); */


// 1.在事件处理函数中，this指向添加事件的元素
// box.onclick = function (){// 事件处理函数
//     console.log( this );
// }

// 2.在构造函数中，this指向实例化对象
// function Cat(n){
//     this.name = n;
// }
// var cat1 = new Cat('小黑');

// 3.this所在的函数，谁调用函数this就指向谁（谁调用指向谁）
function show(){
    console.log( this );
}
window.show();// this -> window
var obj2 = {
    name:'老王',
    say: show
}
obj2.say();// this -> obj2
box.onclick = show;// this -> box

// 4.this所在的函数，找不到调用者时，指向window对象
box.onclick = function (){
    console.log( this );// this -> box
    show();// this -> window
}
show();// this -> window
setTimeout(function (){
    console.log( this );// this -> window
},10);

console.log( this );// this -> window
</script>
</body>
</html>